<template>
    <button :disabled="disabled" :class="[active, buttonType, buttonSize, disabled ? 'button-disabled' : '']" class="my-button-wrapper"
            @mousedown="handleMousedown"
            @mouseup="handleMouseup"
            @touchstart="handleMousedown">
        {{ text }}
    </button>
</template>

<script>
    export default {
        name: 'my-button',
        data() {
          return {
              active: ''
          }
        },
        props: {
            text: {
                type: String,
                default: 'default'
            },
            type: {
                type: String,
                default: 'info'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            size: {
                type: String,
                default: 'default'
            }
        },
        methods: {
            handleMousedown() {
                if (this.disabled) return
                this.active = 'active'
            },
            handleMouseup(e) {
                if (this.disabled) return
                this.active = ''
                this.$emit('button-click', e)
            }
        },
        computed: {
            buttonType() {
                return 'button-' + this.type
            },
            buttonSize() {
               return 'button-size-' + this.size
            },
        },
    }
</script>

<style scoped>
    .my-button-wrapper {
        color: #fff;
        outline: none;
        border-radius: .2rem;
        opacity: 0.8;
    }
    .button-size-default {
        padding: .2rem .5rem;
        font-size: .4rem;
    }
    .button-size-lang {
        font-size: .4rem;
        width: 7rem;
        padding: .2rem 0;
        text-align: center;
    }
    .button-size-mini {
        font-size: .3rem;
        padding: .15rem .28rem;
    }
    .button-default {
        background: #07c160;
        border: 1px solid #07c160;
    }
    .button-info {
        background: #1989fa;
        border: 1px solid #1989fa;
    }
    .button-danger {
        background: #ee0a24;
        border: 1px solid #ee0a24;
    }
    .button-disabled {
        opacity: 0.5;
    }
    .active {
        opacity: 1;
    }
</style>
